import type { Component } from "vue"

// 可渲染的表单元素类型
export type FormType = 'input' // 输入框
  | 'inputNumber' // 数字输入框
  | 'autocomplete' // 自动补全输入框
  | 'select' // 选择器
  | 'cascader' // 级联选择器
  // | 'selectV2' // 虚拟化选择器 *
  | 'datePicker' // 日期选择器 && 日期时间选择器
  | 'timePicker' // 时间选择器
  | 'timeSelect' // 时间选择
  | 'radio' // 单选框
  | 'radioButton' // 按钮样式单选框
  | 'radioGroup' // 单选框组
  | 'checkbox' // 多选框
  | 'checkboxButton' // 按钮样式多选框
  | 'checkboxGroup' // 多选框组
  | 'colorPicker' // 取色器
  | 'rate' // 评分
  | 'slider' // 滑块
  | 'switch' // 开关
  | 'upload' // 上传
  | 'custom' // 自定义
  | 'view' // 仅展示

// 表单元素列表项参数
export interface Column {
  prop?: string // 绑定对象的键，表单元素必须设置此值
  label?: string // 显示label
  value?: any // 初始值，在绑定的对象prop为 '' 或 null 或 undefined 时默认赋此值
  type?: FormType // 表单元素类型，参考 FormType
  options?: ObjectAny[] | Function // type为select或group时，需要传递此参数；在分组模式时，此值代表分组子项
  is?: Component // type为custom时，需要传递此参数
  props?: ObjectAny // 表单元素参数
  columnProps?: ObjectAny // 列参数
  events?: ObjectAny // 表单元素事件
  rules?: object[] // 表单元素校验规则
  slots?: ObjectAny // 表单元素插槽
  colProps?: ObjectAny // el-col 参数
  render?: Boolean // 元素是否正常渲染
  columns?: Column[] // 分组模式时设置组元素
}

// 组件配置
export interface Config {
  mode: 'add' | 'edit' | 'look' // 表单模式 add或edit或look，决定元素的disabled状态(通过props传递disabled可以覆盖此disabled状态)
  formProps?: ObjectAny // el-form 参数
  rowProps?: ObjectAny // el-row 参数
  columns: Column[] // 渲染的表单元素列表，参考 Column
}
